<template>
  <div class="container">
    <!-- 试题预览对话框 -->
    <el-dialog title="预览文章" :visible="showQueDiolog" @close="close">
      <div class="title">
        <h2>{{ previewList.title }}</h2>
        <div>
          <span> {{ previewList.createTime }} </span>
          <span> {{ previewList.userName }} </span>
          <i class="el-icon-view"></i>
          <span> {{ previewList.visits }} </span>
        </div>
      </div>
      <div class="content">
        <span v-html="previewList.articleBody"></span>

      </div>
    </el-dialog>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { detail } from '@/api/hmmm/articles'
export default {
  props: {
    showQueDiolog: {
      type: Boolean,
      default: false
    },
    previewId: {
      type: Number,
      default: null
    }
  },
  data () {
    return {
      previewList: {
        title: '', // 文章标题
        createTime: '', // 录入时间
        userName: '', // 录入人
        visits: null, // 浏览次数
        articleBody: '', // 文章内容
        videoURL: ''// 视频地址

      }
    }
  },
  methods: {
    // 获取文章预览列表 (父元素点击了预览按钮时，发送请求)
    async getPreviewList () {
      // 调用获取预览列表
      const { data } = await detail({ id: this.previewId })
      // console.log(data)
      this.previewList = data
      // console.log('预览列表', this.previewList)
      // 转换时间格式
      this.previewList.createTime = dayjs(this.previewList.createTime).format('YYYY-MM-DD HH:mm:ss')
    },

    // 关闭弹层
    close () {
      // 通知父组件关闭弹层
      this.$emit('update:showQueDiolog', false)
    }
  }
}
</script>

<style scoped lang='scss'>
.title{
  span{
    margin-left: 10px
  }
}
.content {
  width: 100%;
  background: #f5f5f5;
  padding: 10px;
  border-top: 1px dashed;
  margin-top: 10px;
}

</style>
